import React from 'react';
import { Spin } from 'antd';
import {WeaErrorPage, WeaLocaleProvider, WeaTable, WeaTools} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const { ls } = WeaTools;
import { isEqual, isEmpty } from 'lodash';
import Title from './Title'; 
import MailCom from './Mail';
import {formatData} from "../../util/common";
import {openLinkUrl} from "../../util/common";
import { setContentviewHeight} from '../../util/common';
//内容组件
class EContent extends React.Component {
    constructor(props) {
        super(props);
        const currentTab = props.edata.currenttab   ;
        this.state = {
            tabdata: props.edata.data,
            currentTab: props.edata.currenttab,
            refresh: false,
        }
        this.handleTabData = this.handleTabData.bind(this);
    }
    componentWillReceiveProps(nextProps){
        if(!isEqual(nextProps, this.props)){
            // const currentTab = nextProps.edata.currenttab || nextProps.edata.tabids[0];
            this.setState({
                tabdata: nextProps.edata.data,
                currentTab:  nextProps.edata.currenttab,
                refresh: false,
            });
        }
    }
    shouldComponentUpdate(nextProps, nextState){
        return !isEqual(this.state, nextState) || !isEqual(this.props, nextProps)
    }
    componentDidMount(){
        this.props.onRef(this);
    }
    handleTabData(tabid){
        const { edata, config, isremembertab } = this.props;
        const { params } = config;
        const { currentTab } = this.state;
        const tabdata_local = ls.getJSONObj('tabdata-' + params.eid + '-' + tabid);
        this.setState({
            currentTab: tabid,
            tabdata: tabdata_local == null ? {} : tabdata_local,
            refresh: tabid !== currentTab,
        });
        setTimeout(()=>{
            this.setState({
                refresh: false,
            });
        },100);
        WeaTools.callApi('/api/portal/element/mailtab', 'POST', {...params, tabid}).then(result => {
            ls.set('tabdata-' + params.eid + '-' + tabid, result);
            if(tabid === this.state.currentTab){
                this.setState({
                    tabdata: result,
                    refresh: false,
                });
                if(isremembertab){
                    let edata = ls.getJSONObj('edata-' + params.eid);
                    if(edata){
                        edata.currenttab = tabid;
                        edata.data = result;
                        ls.set('edata-' + params.eid, edata);
                    }
                }
            }
        });
    }
    render() {
        let contentHtml = <div></div>;
        const { config, edata, handleRefresh, handleDelete, fontSizeMp } = this.props;
        const { tabdata, currentTab, refresh } = this.state;
        const {  dataColoums=[],goUrl, oplist} = tabdata;
        const { tabids, titles, esetting,data } = edata;
        const { eid } = config.params;
        let { fontStyle,header } = config.item;
        if(!isEmpty(fontSizeMp)) fontStyle = fontSizeMp;
        esetting.fontStyle = fontStyle;
        esetting.dataColoums = dataColoums;
        const { contentview = {} } = config.item;
        let cstyle = {};
        // if(header.displayPosition && header.displayPosition == 'bottom' && tabids && tabids.length > 1){
        //     cstyle = {height: parseInt(contentview.style.height)-32+"px",overflow: "auto"};
        // }else if(tabids && tabids.length == 1){
        //     cstyle = {height: contentview.style.height,overflow: "auto"};
        // }
        if(header.displayPosition && header.displayPosition == 'bottom'){
            if(tabids && tabids.length > 1 || tabids && tabids.length == 1 && esetting.isAlwaysShow=='1'){
                if(contentview.style.height){
                    if(esetting.tabstyle == '1' && esetting.tabvalue){
                        cstyle = setContentviewHeight(contentview.style.height,esetting.tabvalue)
                    }else{
                        cstyle = {height: parseInt(contentview.style.height)-32+"px",overflow: "auto"};
                    } 
                }else {
                    cstyle = {height: contentview.style.height,overflow: "auto"};
                }
                let elementH=parseInt(contentview.style.height)-parseInt($(`#titleContainer_${eid}`).css('height'));
                if(elementH!=parseInt(cstyle.height)){
                    if(elementH<parseInt(cstyle.height)){
                        cstyle.height=elementH+"px";
                    }
                }
            }
        }

        let operHtml = null;
        if(goUrl != undefined && oplist != undefined ){
            operHtml = <div className="mail-sparator"><font className="mail-sparator-font">{getLabel(388018,"邮件服务器上的新邮件:")}&nbsp;{oplist.map(item=> <span>{item.name}({item.number})</span>)}&nbsp;<a href="javascript:void(0);" onClick={openLinkUrl.bind(this,goUrl)}>{getLabel(20267,"进入我的邮件收取")}</a></font></div>;
        }
        if (tabdata) {

                contentHtml =<div>{
                    tabdata.data && tabdata.data.length > 0 ? <div>
                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@vfg2lz`} columns={formatData(tabdata.data[0], esetting)} showHeader={esetting.showHeader=='1'}
                                  pagination={false} dataSource={tabdata.data} size="small"/>
                    </div> : <div className = "ant-table-placeholder">
                        <span> <i className = "anticon anticon-frown"></i>{getLabel(83553, '暂无数据')}</span>
                    </div>}
            {operHtml}
                </div>
        }
        const _titleProps = {
            currentTab,
            config,
            titles,
            tabids,
            handleRefresh,
            handleDelete,
            fontSizeMp,
            tabwidth: esetting.tabwidth,
            methodvalue: esetting.methodvalue,
            isAlwaysShow: esetting.isAlwaysShow,
            tabstyle: esetting.tabstyle,
            tabvalue: esetting.tabvalue,
            handleTabData: this.handleTabData
        }
        return <div>
                <Title ecId={`${this && this.props && this.props.ecId || ''}_Title@tmk4nz`} {..._titleProps}/>
                <div className="tabContant" id={`tabcontant_${eid}`} style={{height: cstyle.height,'overflow-y':'auto'}}>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@0rtjtx`} spinning={refresh}>{contentHtml}</Spin>
                </div>
            </div>;
    }
}

class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
            return ( <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@4a6isj`} msg = { hasErrorMsg ? this.props.error : getLabel(385218,"对不起，该页面异常，请联系管理员！") }/>
        );
    }
}
EContent = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(EContent);
export default EContent;
